<template>
  <div class="register dfsp">
    <div class="loginbg">
      <div>
        <img src="@/style/img/leftlogo.png" />
      </div>
      <div class="left-text">
        <span>{{ t('index') }}</span>
        <el-divider direction="vertical" />
        <span>{{ t('futures') }}</span>
        <el-divider direction="vertical" />
        <span>{{ t('exchangeRate') }}</span>
      </div>
    </div>
    <div class="right">
      <div class="right-form">
        <div class="title">{{ t('register') }}</div>
        <el-form ref="refruleForm" :model="ruleForm" :rules="rules" class="refruleForm">
          <el-form-item prop="area">
            <el-select
              :placeholder="t('pleaseselectphonebelong')"
              size="large"
              v-model="ruleForm.area"
              @change="change"
            >
              <el-option
                v-for="item in range"
                :key="item.title"
                :label="item.title"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="vcode">
            <el-input
              size="large"
              :prefix-icon="Connection"
              :placeholder="t('pleaseenterinvitationcode')"
              v-model="ruleForm.vcode"
              class="vcode"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="email">
            <el-input
              size="large"
              :prefix-icon="Promotion"
              :placeholder="t('pleaseenteremail')"
              v-model="ruleForm.email"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="username">
            <el-input
              size="large"
              :prefix-icon="User"
              :placeholder="t('pleaseenteraccount')"
              v-model="ruleForm.username"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              size="large"
              :prefix-icon="Lock"
              type="password"
              :placeholder="t('pleaseenterpassword')"
              v-model="ruleForm.password"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="confirm_password">
            <el-input
              size="large"
              :prefix-icon="Lock"
              type="password"
              :placeholder="t('pleaseenterpassword')"
              v-model="ruleForm.confirm_password"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="mobile">
            <el-input
              size="large"
              :prefix-icon="Iphone"
              :placeholder="t('pleaseenterphone')"
              v-model="ruleForm.mobile"
            >
              <template #append>
                <div @click.prevent.stop="sendSms" class="GetCode">{{ Timetext }}</div>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="code">
            <el-input
              size="large"
              :prefix-icon="Message"
              :placeholder="t('pleaseentercode')"
              v-model="ruleForm.code"
            >
              <template #append>
                <div>
                  <graphicCode :identifyCode="identifyCode"></graphicCode>
                </div>
              </template>
            </el-input>
          </el-form-item>

          <el-button
            v-loading="loading"
            :disabled="loading"
            class="btn btnbg"
            @click="submitForm(refruleForm)"
            size="large"
            >{{ t('confirm') }}</el-button
          >
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { useStore } from 'vuex'
const store = useStore() //vuex
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { User, Lock, Message, Iphone, Promotion, Connection } from '@element-plus/icons-vue'
import { reactive, ref, getCurrentInstance, onMounted } from 'vue'
const router = useRouter() //路由
const ruleForm = reactive({
  username: '',
  password: '',
  confirm_password: '',
  area: '',
  mobile: '',
  code: '',
  vcode: '',
  email: '',
})
const refruleForm = ref() //表单验证
const loading = ref(false) //表单验证
const password = (rule, value, callback) => {
  if (value === '') {
    callback(new Error(t('pleaseenterpassword')))
  } else {
    if (ruleForm.password !== '') {
      if (!refruleForm.value) return
      refruleForm.value.validateField('confirm_password', () => null)
    }
    callback()
  }
}
const confirm_password = (rule, value, callback) => {
  if (value === '') {
    callback(new Error(t('pleaseenterpassword')))
  } else if (value !== ruleForm.password) {
    callback(new Error(t('twopasswordsnotmatch')))
  } else {
    callback()
  }
}

const rules = reactive({
  username: [
    {
      required: true,
      message: t('pleaseenteraccount'),
      trigger: 'change',
    },
  ],
  password: [
    {
      validator: password,
      trigger: 'change',
    },
  ],
  confirm_password: [
    {
      validator: confirm_password,
      trigger: 'change',
    },
  ],
  area: [
    {
      required: true,
      message: t('pleaseselectphonebelong'),
      trigger: 'change',
    },
  ],
  mobile: [
    {
      required: true,
      message: t('pleaseenterphone'),
      trigger: 'change',
    },
  ],
  code: [
    {
      required: true,
      message: t('pleaseentercode'),
      trigger: 'change',
    },
  ],
  vcode: [
    {
      required: true,
      message: t('pleaseenterinvitationcode'),
      trigger: 'change',
    },
  ],
  email: [
    {
      required: true,
      message: t('pleaseenteremail'),
      trigger: 'change',
    },
  ],
})
const { proxy } = getCurrentInstance()
onMounted(() => {
  getArea()
})
// 点击确认
const setmobile = ref('')
const submitForm = async (formEl) => {
  loading.value = true
  await formEl.validate((valid, fields) => {
    if (valid) {
      setmobile.value = ruleForm.mobile
      ruleForm.mobile = mobile_prefix.value + ruleForm.mobile
      proxy
        .$post('/mt4/Login/register', ruleForm)
        .then((res) => {
          ElMessage({
            message: res.msg,
            type: 'success',
          })
          store.dispatch('SETTOKNE', res.data.token)
          router.push('/')
          loading.value = false
          formEl.resetFields()
        })
        .catch((res) => {
          ruleForm.mobile = setmobile.value
          loading.value = false
        })
    } else {
      loading.value = false
    }
  })
}

// 验证码
// 图形验证码
import graphicCode from '@/components/graphicCode.vue'
let identifyCode = ref('') //验证码

// 发送
const TimeState = ref(true)
const sendSms = () => {
  if (ruleForm.area == '') {
    ElMessage.error(t('pleaseselectphonebelong'))
    return
  }
  if (ruleForm.mobile == '') {
    ElMessage.error(t('pleaseenterphone'))
    return
  }
  if (!TimeState.value) return
  TimeState.value = false
  proxy
    .$post('/mt4/Login/sendSms', {
      mobile: mobile_prefix.value + ruleForm.mobile,
    })
    .then((res) => {
      ElMessage({
        message: res.msg,
        type: 'success',
      })
      identifyCode.value = ''
      identifyCode.value += res.data
      setTime()
    })
    .catch((res) => {
      TimeState.value = true
    })
}
// 计时器
const setIntervalTime = ref(null)
const Timetext = ref(t('sendcode'))
const setTime = () => {
  let Time = 60
  setIntervalTime.value = setInterval(() => {
    if (Time == 0) {
      clearInterval(setIntervalTime.value)
      Timetext.value = t('sendcode')
      TimeState.value = true
    } else {
      Time--
      Timetext.value = Time + 'S'
    }
  }, 1000)
}
// 获取归属地
const range = ref([])
const mobile_prefix = ref('')
const getArea = () => {
  proxy
    .$post('/mt4/Login/getArea', {})
    .then((res) => {
      range.value = res.data
    })
    .catch((res) => {})
}
const change = (e) => {
  range.value.forEach((itme) => {
    if (e == itme.id) {
      mobile_prefix.value = itme.mobile_prefix
      return
    }
  })
}
</script>

<style scoped lang="scss">
@import '../../style/scss/register.scss';
</style>
